<template>
    <div>
        <el-card id="win1" style="border-top: 4px #00ae1f solid;height: 220px;">
            <el-row>
                <el-col :span="12"><p style="text-align: left">{{name}}</p></el-col>
                <el-col :span="3" :offset="8">
                    <p @click="more" class="more-link" style="text-align: right;font-size: 14px">更多</p>
                </el-col>
            </el-row>
            <el-divider/>
            <p @click="goPosts(table.id)" class="list post-link" v-for="table in tableData" >
                {{table.title}}
            </p>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "win2",
        created: function f() {
            this.$axios
                .get('/api/plate/getById',{
                    params:{
                        id:this.id
                    }
                })
                .then((req)=>{
                    const tmp = req.data.data;
                    this.name = tmp.name;
                });
            this.$axios
                .get('/api/posts/getPosts',{
                    params:{
                        plateId:this.id,
                        page:"1"
                    }
                })
                .then((req)=>{
                    const tmp = req.data.data;
                    this.tableData = tmp;
                    console.log(this.tableData)
                });
        },
        data(){
            return{
                name:'123',
                tableData:[{
                    id:'1',
                    title:'',
                    createTime:'',
                    start:false,
                    top:false,
                    clock:false
                }]
            }
        },
        props:['id'],
        methods:{
            goPosts(postsId){
                this.$router.push("posts?id="+postsId);
            },
            jumpPosts:function (id) {
                this.$router.push("/posts?id="+id);
            },
            more:function () {
                this.$router.push("/plate?id="+this.id);
            },
        }
    }
</script>

<style scoped>
    .list{
        padding-left: 10px;
        padding-top: 3px;
        padding-bottom: 3px;
    }
    p {
        text-align: left;
    }
    ul {
        list-style: none;
    }
    .post-link {
        color: inherit;
    }
    p:hover {
        color: #969696;
        cursor: pointer;
        text-decoration: underline;
    }
    >>>.el-card__body {
        padding-top: 10px;
    }
    .el-divider--horizontal {
        margin: 15px 0;
    }
    .more-link:hover {
        cursor:pointer;
        text-decoration: none;
        background-color: #e97c62;
        border-radius: 3px;
        color: #ffffff;
    }
    .more-link:invalid{

    }
</style>
